<template>
	<div class="wy-main supply-dedicatedLine">
		<a-form :form="form" @submit="handleSubmit">
			
			<div class="route">
				<p class="route_text">专线直达业务是物流云推出的精准匹配的优质物流服务，推荐的物流承运商是物通网上门核实过的，请放心选择，让您发货放心又省钱！</p>
				<div class="route_choice">
					<p><b>线路信息</b></p>
					<a-row>
						<a-col :span="12" class="choice-left">
							<div class="distance" v-if="distance">
								<div class="border-top"></div>
								约<span style="color: red;">{{distance}}</span>公里
								<div class="border-bottom"></div>
							</div>
							<a-form-item label="出发地" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
								<a-input readOnly style="width: 280px;" @click="departureShowMap" v-decorator="[ 'fromCity', {rules: [{ required: true, message: '请选择出发地!' }]}]" placeholder='请选择出发地' ref="userNameInput">
									<a-icon type="environment" slot="suffix" style="color: #15837A;" />
								</a-input>
							</a-form-item>
							<a-form-item label="到达地" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
								<a-input readOnly style="width: 280px;" @click="destinationShowMap" class="wy-input" v-decorator="[ 'toCity', {rules: [{ required: true, message: '请选择出发地!' }]}]" placeholder='请选择到达地'>
									<a-icon type="environment" slot="suffix" style="color: #FF2F47;" />
								</a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="街道/门牌号" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
								<a-input style="width: 280px;" v-decorator="['fromStreet']" placeholder="详细街道地址（可不填）" @click="getdepartureStreet" />
							</a-form-item>
							<a-form-item label="街道/门牌号" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
								<a-input style="width: 280px;" v-decorator="['toStreet']" placeholder="详细街道地址（可不填）" @click="getdestinationStreet" />
							</a-form-item>
						</a-col>
					</a-row>
				</div>
				<a-divider style="width: 95%;margin: 0;margin-left: 25px; " />
				<div class="route_choice">
					<p><b>货物信息</b></p>
					<div class="sup-info" v-for='(item,index) in huowuArray'>
						<div class="sup-list">
							<a-form-item label="货物图片" :label-col="{ span: 2 }" :wrapper-col="{ span: 16 }" class="upzjimg">
								<div class="clearfix">
								    <a-upload
								    	name="file" 
										:action="uploadUrl"
										v-decorator="['upload'+item.key, {rules: [{ required: true, message: '请选择货物图片!' }]}]"
										listType="picture-card"
										:fileList="item.fileList"
										@preview="handlePreview"
										@change="Positive_Change"
										class="avatar-uploader up_img"
								    >
								      <div v-if="item.fileList.length < 3">
										<div class="img_zz" @click="uploadIndexClick(index)">
											<a-icon class="wy-font-24" :type="item.loading ? 'loading' : 'plus'" />
										</div>
								      </div>
								    </a-upload>
								    
								    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
								      <img alt="example" style="width: 100%" :src="previewImage" />
								    </a-modal>
								</div>
							</a-form-item>
							<a-row>
								<a-col span="6">
									<a-form-item label="货物名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
										<a-input @change="inputChangeHuowu('cargoName',index,item.key)" placeholder="请输入货物名称" v-decorator="[ 'cargoName'+item.key, {initialValue: item.cargoName},{rules: [{ required: true, message: '货物名称不能为空!' }]}]" style="width: 150px;" />
									</a-form-item>
								</a-col>
								<a-col span="6">
									<a-form-item label="货物类型" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
										<a-select v-decorator="['cargoType'+item.key,{initialValue: item.cargoType},{rules: [{ required: true, message: '货物类型不能为空!' }]}]" @change="inputChangeHuowu('cargoType',index,item.key)" style="width: 90px">
											<a-select-option value="1"> 重货 </a-select-option>
											<a-select-option value="2"> 轻货</a-select-option>
										</a-select>
									</a-form-item>
								</a-col>
								<a-col span="6">
									<a-form-item label="预估重量" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
										<a-input style="width: 65px" v-decorator="['weight'+item.key],{initialValue: item.weight}" />
										<a-select v-decorator="['weightUnit'+index, {initialValue: item.weightUnit}]" style="width: 75px;margin-left: 10px;"  @change="inputChangeHuowu('weightUnit',index,item.key)">
											<a-select-option value="1"> 公斤 </a-select-option>
											<a-select-option value="2"> 吨 </a-select-option>
										</a-select>
									</a-form-item>
								</a-col>
								<a-col span="6">
									<a-form-item label="预估体积" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
										<a-input v-decorator="['volume'+item.key,{initialValue: item.volume}]"  @change="inputChangeHuowu('volume',index,item.key)" style="width: 90px" />
										<span style="margin-left: 10px;">立方米</span>
									</a-form-item>
								</a-col>
							</a-row>
							<a-form-item label="货物简介" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
								<a-input placeholder="请描述货物简介" v-decorator="[ 'comment'+item.key, {rules: [{ required: true, message: '货物简介不能为空!' }]}]"  @change="inputChangeHuowu('comment',index,item.key)" style="width: 810px" />
							</a-form-item>
						</div>
						<div class="add-but">
							<a-icon type="plus-circle" v-if="huowuArray.length-1 == index"  @click="huowuAdd" style="color: #15837A;font-size: 30px;" />
							<a-icon type="minus-circle" v-if="huowuArray.length-1 != index" @click="huowuDelete(index)" style="color: #FF495E;font-size: 30px;" />
						</div>
					</div>
				</div>
				<a-divider style="width: 95%;margin: 0;margin-left: 25px;" />
				<div class="route_choice">
					<p><b>联系方式</b></p>
					<a-row>
						<a-col :span="8">
							<a-form-item label="发货人" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
								<a-input v-decorator="['sendPerson', {rules: [{ required: true, message: '发货人不能为空！'}]}]" />
							</a-form-item>
							<a-form-item label="收货人" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
								<a-input v-decorator="['receivePerson']" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="发货人手机" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
								<a-input v-decorator="['sendMobile', {rules: [{ required: true, message: '发货人手机不能为空！'}]}]" />
							</a-form-item>
							<a-form-item label="收货人手机" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
								<a-input v-decorator="['receiveMobile']" />
							</a-form-item>
						</a-col>
						<!--<a-col :span="8">
							<a-form-item>
								<a-button type="primary" @click="openPersonnelList('0')">选择常用发货人</a-button>
								<a-checkbox style="margin-left: 10px;" v-model='addDeliver'>保存到常用发货人</a-checkbox>
							</a-form-item>
							<a-form-item>
								<a-button type="primary" @click="openPersonnelList('1')">选择常用收货人</a-button>
								<a-checkbox style="margin-left: 10px;" v-model="addReceiving">保存到常用收货人</a-checkbox>
							</a-form-item>
						</a-col>-->
					</a-row>
				</div>
				<a-divider style="width: 95%;margin: 5px 20px 20px 25px; " />
				<div class="ant-row ant-form-item">
					<div class="ant-col-1 ant-form-item-label"></div>
					<div class="ant-col-22 ant-form-item-control-wrapper">
						<div class="ant-form-item-control">
							<span class="ant-form-item-children">
								<a-checkbox v-model='agreement' >
									我已阅读并接受<a href="JavaScript:;">《云南国际物流云用户协议》</a><a href="JavaScript:;">《用户信息发布协议》</a>
								</a-checkbox>
							</span>
						</div>
					</div>
				</div>
				<div class="ant-row ant-form-item">
					<div class="ant-col-1 ant-form-item-label"></div>
					<div class="ant-col-10 ant-form-item-control-wrapper">
						<div class="ant-form-item-control">
							<span class="ant-form-item-children">
								<a-button type="primary" :disabled="!agreement" html-type="submit" style="width: 280px;height:50px;margin-top: -10px;">
									立即发布
								</a-button>
							</span>
						</div>
					</div>
				</div>
			</div>
		</a-form>
		<!--选择常用发货人-->
		<personnel-list ref="PersonnelDialog" @PersonnelData="getPersonnelData"></personnel-list>
		<!--地图Svg显示位置-->
		<map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
	</div>
</template>
<script>
	import PersonnelList from '@/components/dialog/PersonnelList'
	import MapSvg from '@/components/dialog/MapSvg'
	import { environment } from '@/environments/environment'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				agreement:false,
				Positive_img: '', // 正面图片
				
				loading: false,
				// fileList: [],
				previewImage: '',
				
				previewVisible: false,
				uploadUrl: environment.FileUploadUrl + '/fileupload/upload', // 图片上传地址

				addDeliver: true,
				addReceiving: true,
				// 地图存起止数据
				departureData: {},
				destinationData: {},
				distance: '',
				uploadIndex: 0,
				form: this.$form.createForm(this),
				huowuArray: []
			}
		},
		computed: {},
		beforeCreate() {
		},
		created() {
			console.log(this.detail,'asjd')
			// 获取编辑的信息
			if(this.detail){
				this.getinfo()
			}
			// 添加图片上传数据
			this.huowuAdd();
		},
		components: {
			// Footer
			PersonnelList,
			MapSvg
		},
		watch: {},
		updated(){
		},
		mounted: function() {

		},
		props: {
			detail:{}
		},
		methods: {
			// 获取编辑的信息
			getinfo(){
				this.$get('/info/infoCargomaster/getCargosmasterById/'+this.detail.cargoId).then((r) => {
					console.log('货物信息：',r)
					let data = r.data.data
					this.form.setFieldsValue({
						fromCity:data.fromCity,
						toCity:data.toCity,
						fromStreet:data.fromStreet,
						toStreet:data.toStreet,
						sendPerson:data.sendPerson,
						receivePerson:data.receivePerson,
						sendMobile:data.sendMobile,
						receiveMobile:data.receiveMobile,
					});
					console.log(this.huowuArray)
					this.huowuArray = data.cargos
					for(let i in data.cargos){
						let arr = data.cargos[i].cargoPics.split(',');
						let newArr = [];
						for (let i = 0;i<arr.length;i++) {
							newArr.push({
								uid: i,
								status:'done',
								url: arr[i]
							})
						}
						this.huowuArray[i].fileList = newArr;
					}
					console.log(this.huowuArray,89899999999999999999999999)
					
				})
				.catch((e) => {
					console.log(e)
				})
			},
			// 表单中的字段关联到外部数据中
			inputChangeHuowu(name,index,key) {
				setTimeout(()=>{
					this.huowuArray[index][name] = this.form.getFieldValue(name+key);
				},100)
			},
			// 动态上传点击时存储当前数组数据的index
			uploadIndexClick (index) {
				this.uploadIndex = index;
			},
		    handleCancel () {
		      this.previewVisible = false
		    },
		    handlePreview (file) {
		      this.previewImage = file.url || file.thumbUrl
		      this.previewVisible = true
		    },
			// 货物信息添加
			huowuAdd() {
				this.huowuArray.push({
					key: this.huowuArray.length,
					cargoPics: '', // 货物图片
					cargoName: '',
					cargoType: '1',
					weight: '',
					weightUnit: '1',
					volume: '',
					comment: '',
					fileList: [],
					loading: false,

				})
			},
			// 货物信息删除
			huowuDelete(index) {
				this.huowuArray.splice(index, 1)
			},
			// 上传图片前事件处理
			beforeUpload(file) {
				const isJPG = file.type === 'image/jpeg' || 'image/png'
				if(!isJPG) {
					this.$message.error('You can only upload JPG file!')
				}
				const isLt2M = file.size / 1024 / 1024 < 2
				if(!isLt2M) {
					this.$message.error('Image must smaller than 2MB!')
				}
				return isJPG && isLt2M
			},
			// 上传货物图片
			Positive_Change(info) {
			    this.huowuArray[this.uploadIndex].fileList = info.fileList
				if(info.file.status === 'uploading') {
					this.huowuArray[this.uploadIndex].loading = true
					return
				}
				if(info.file.status === 'done') {
					
					this.huowuArray[this.uploadIndex].loading = false
					info.fileList[info.fileList.length-1].url = info.file.response.data.certifJpgFile;
					this.huowuArray[this.uploadIndex].fileList = info.fileList;
					// 每个货物的多个图片拼成字符串，按,分割
					let urls = [];
					for (var i=0;i<info.fileList.length;i++){
						urls.push(info.fileList[i].url);
					}
					this.huowuArray[this.uploadIndex].cargoPics = String(urls);
				}
			},

			// 提交保存
			handleSubmit(e) {
				if(this.loading) return;
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						// this.loading = true
						values.cargos = this.huowuArray
						let name = [];
						for (var i = 0;i<this.huowuArray.length;i++) {
							name.push(this.huowuArray[i].cargoName)
						}
						values.cargoTitle = String(name);
						values.type = 1;
						this.$post('/info/infoCargomaster', values, true).then((r) => {
							if(r.status == 200) {
								this.$message.success(r.data.message);
								// this.$notification.success({
								// 	message: r.data.message,
								// });
								this.form.resetFields();
								this.huowuArray = [];
								this.huowuAdd();
							}
							this.loading = false;
						}).catch((e) => {
							this.loading = false;
						})
					}
				});
			},
			// 省市地图回调
			mapSvgCall(d) {
				if(d.name === 'departure') {
					this.form.setFieldsValue({
						fromCity: d.provCityArea
					});
					this.departureData = Object.assign({}, d);
				}
				if(d.name === 'destination') {
					this.form.setFieldsValue({
						toCity: d.provCityArea
					});
					this.destinationData = Object.assign({}, d);
				}
				if(d.name === 'departureStreet') {
					this.form.setFieldsValue({
						fromStreet: d.address
					});
				}
				if(d.name === 'destinationStreet') {
					this.form.setFieldsValue({
						toStreet: d.address
					});
				}
				this.getDistanceCount();
			},
			// 选择出发地
			departureShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('departure', 2, '', '', '');
			},
			// 选择到达地
			destinationShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('destination', 2, '', '', '');
			},
			// 选择出发地街道/门牌号
			getdepartureStreet() {
				//				this.$refs.mapSvgDialog.mapSvgVisible( 'departureStreet',3,'北京市','通州区','市辖区' );
				this.$refs.mapSvgDialog.mapSvgVisible('departureStreet', 3, this.departureData.province, this.departureData.city,
					this.departureData.area);
			},
			// 选择到达地街道/门牌号
			getdestinationStreet() {
				//				this.$refs.mapSvgDialog.mapSvgVisible( 'departureStreet',3,'北京市','通州区','市辖区' );
				this.$refs.mapSvgDialog.mapSvgVisible('destinationStreet', 3, this.destinationData.province, this.destinationData.city,
					this.destinationData.area);
			},
			// 起运地到目的地的距离
			getDistanceCount() {
				if(this.departureData.point && this.destinationData.point) {
					this.$refs.mapSvgDialog.distanceCount(this.departureData.point, this.destinationData.point);
				}
			},
			// 调用距离返回
			distanceCall(num) {
				this.distance = num
				//				 this.form.setFieldsValue({ juliNum: num });
			},
			// 选择常用发货人选择信息
			getPersonnelData(data, type) {
//				if(type == 0) {
//					this.form.setFieldsValue({
//						sendPerson: data.name,
//						sendMobile: data.Telephone,
//					});
//				}
//				if(type == 1) {
//					this.form.setFieldsValue({
//						receivePerson: data.name,
//						receiveMobile: data.Telephone,
//					});
//				}
			},
			// 选择常用发货人打开
			openPersonnelList(type) {
				this.$refs.PersonnelDialog.openDialog(type)
			},
		},
		computed: {
			...mapState({
				multipage: state => state.setting.multipage,
				user: state => state.account.user,
			}),
		},
	}
</script>

<style lang="less">
	.supply-dedicatedLine {
		.route {
			.route_text {
				font-size: 12px;
				padding: 0px 30px;
				margin: 0;
			}
			.route_choice {
				b{
					color: #333333;
				}
				width: 100%;
				padding: 10px 30px;
				margin-top: 10px;
				.sup-info{
				    width: 1050px;
				    margin-bottom: 20px;
				    position: relative;
					.sup-list {
					    width: 1000px;
					    padding: 20px;
					    background: #F2F2F2;
					}
					.add-but{
					    position: absolute;
					    right: 0px;
					    bottom: 0px;
					}
				}
				.upzjimg {
					.ant-upload {
						padding: 0;
					}
					.ant-upload-list-picture-card .ant-upload-list-item {
						width: 80px;
						height: 80px;
					}
					.ant-upload.ant-upload-select-picture-card {
						border: 1px solid #DDDDDD;
					}
					.ant-upload-list-item{
						padding: 0px;
					}
					.up_img {
						float: left;
						position: relative;
						.ant-upload.ant-upload-select-picture-card {
							width: 80px;
							height: 80px;
						}
						img {
							width: 80px;
							height: 80px;
						}
						.up_img_d {
							color: #DDDDDD;
							width: 80px;
							height: 80px;
							padding-top: 28px;
						}
						.img_zz {
							width: 80px;
							height: 80px;
							padding-top: 30px;
							color: #dddddd;
						}
					}
				}
				.choice-left {
					position: relative;
					.distance {
						position: absolute;
						width: 100px;
						height: 100px;
						left: 360px;
						text-align: right;
						.border-top {
							width: 60px;
							height: 20px;
							border-top: 1px solid;
							border-right: 1px solid;
							margin-top: 20px;
						}
						.border-bottom {
							width: 60px;
							height: 20px;
							border-bottom: 1px solid;
							border-right: 1px solid;
						}
					}
				}
			}
			.route_but {
				width: 100%;
				border: 1px solid #eee;
				padding: 10px 30px;
				margin-top: 10px;
				text-align: center;
			}
		}
	}
</style>